<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.img_div {
			    margin: 20px 400px 0 400px;
			    position: relative;
			    width: 531px;
			    height: 354px;
			}
			.mask {
			    position: absolute;
			    top: 0;
			    left: 0;
			    width: 531px;
			    height: 354px;
			    background: rgba(000, 000, 000, 0.6);
			    color: #ffffff;
			    opacity: 0;
			}
			.mask h3 {
			    text-align: center;
			}
			.img_div a:hover .mask {
			    opacity: 1;           
			}
		</style>
	</head>
	<body>
		<div class="img_div">
		    <img src="../img/pt1.jpg">
		 
		        <a href="#">
		            <div class="mask">
		               <h3>A Picture of food</h3>
		                </div>
		        </a>
		</div>
	</body>
</html>
